<template>
  <div>
    <!-- 使用动态组件完成选项卡操作 -->
    <ul class="nav">
      <li
        v-for="(item,index) in navlist"
        :key="item.id"
        @click="comName=item.comname"
        :class="comName==item.comname?'active':''"
      >{{item.navname}}</li>
    </ul>
    <!-- 使用动态组件实现切换 -->
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import News from "./News.vue";
import Sport from "./Sport.vue";
import Funny from "./Funny.vue";
export default {
  data() {
    return {
      navlist: [
        { id: 1, navname: "新闻", comname: "news" },
        { id: 2, navname: "综艺", comname: "funny" },
        { id: 3, navname: "体育", comname: "sport" }
      ],
      comName: "news"
    };
  },
  components: {
    news: News,
    sport: Sport,
    funny: Funny
  }
};
</script>
<style scoped>
.nav {
  display: flex;
  list-style: none;
}
li {
  margin: 0 10px;
}
.active {
  background: red;
}
</style>